
/* focus invalid disabled checked empty only */
export default function Page(){
  return (
    <div className={'p-20 flex flex-col gap-y-5'}>
      {/*聚焦样式*/}
      <input className={'block w-1/3 p-2 border focus:outline-none focus:border-pink-300'} type={'text'}/>
      {/*禁用样式*/}
      <input className={'block w-1/3 p-2 border focus:outline-none disabled:cursor-not-allowed'} type={'text'} disabled/>
      {/*检查邮箱*/}
      <input className={'block w-1/3 p-2 border invalid:bg-pink-500'} type={'email'} />
      {/*复选框选中时的样式*/}
      <input className={'block w-1/3 p-2 border checked:accent-blue-600'} type={'checkbox'} />
    </div>
  )
}
